<div class="x-nav">
  <span class="layui-breadcrumb">
    <a>设置</a>
    <a>
      <cite>角色管理</cite></a>
  </span>
  <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()"
    title="刷新">
    <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
</div>
<div class="layui-row layui-col-space15">
  <div class="layui-col-md12">
    <div class="layui-card">
      <div class="layui-card-body ">
        <table id='dataGrid' lay-filter="grid"></table>
      </div>
    </div>
  </div>
</div>

<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon">&#xe642;</i>编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon">&#xe640;</i>删除</a>
</script>
<script type="text/html" id="toolbarDemo">
  <div class = "layui-btn-container" > 
      <button class = "layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon"></i>新增</button>
  </div > 
</script>
<script type="text/html" id="switchTpl">
  <!-- 这里的 checked 的状态只是演示 -->
<input type="checkbox" name="state" value="{{d.id}}" lay-skin="switch" lay-text="开启|停用" lay-filter="stateDemo"
  {{ d.state == 'Y' ? 'checked' : '' }}>
</script>

<script>
  layui.use(['table', 'form'], function () {
    var table = layui.table;
    var form = layui.form;

    // 首次加载
    table.render({
      elem: '#dataGrid'
      , height: 'full'
      , url: './query.html' //数据接口
      , toolbar: '#toolbarDemo'
      , defaultToolbar: []
      , cols: [[ //表头
        { field: 'id', title: 'ID', hide: true }
        , { field: 'name', title: '名称' }
        , { field: 'state', title: '状态', width: 95, templet: '#switchTpl', unresize: true }
        , { field: 'right', title: '操作', toolbar: '#barDemo', minWidth: 230, width: 230 }
      ]]
    });

    //表头工具栏事件
    table.on('toolbar(grid)', function (obj) {
      switch (obj.event) {
        case 'add':
          xadmin.open('新增用户', 'edit.html', '', '', true);
          break;
      };
    });

    // 编辑、删除事件
    //监听行工具条
    table.on('tool(grid)', function (obj) {
      var data = obj.data; //获得当前行数据
      var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
      var tr = obj.tr; //获得当前行 tr 的DOM对象
      switch (layEvent) {
        case 'edit':// 编辑
          xadmin.open('编辑用户', 'edit.html?id=' + data.id, '', '', true);
          break;
        case 'del':// 删除
          layer.confirm('确认要删除吗？', function () {
            main.ajaxPost(
              {
                url: "{:url('delete')}",
                data: { "id": data.id },
              },
              function (data) {
                table.reload('dataGrid'); //只重载数据
              }
            )
          });
          break;
      };
    });

    form.on('switch(stateDemo)', function (obj) {
      if (obj.elem.checked) {
        var data = { id: this.value, state: 'Y' };
      } else {
        var data = { id: this.value, state: 'N' };
      }
      // 发异步，把数据提交给php
      main.ajaxPost(
        {
          url: "{:url('state')}",
          data: data,
        }
      )
      return false;
    });
  });
</script>